<template>
  <div class="box">
    <div class="box_left">
      <el-row class="is-back-padding" style="padding-top: 10px">
        <el-form
          :model="formData"
          size="mini"
          label-width="110px"
          style="width: 100%; display: flex; justify-content: space-around"
        >
          <el-col :span="11">
            <el-form-item label="代码类型" required>
              <el-select
                v-model="formData.leixingdaima"
                placeholder="请选择代码类型"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in listOptions.CompanyCodeOptions"
                  :key="index"
                  :label="item.Name"
                  :value="item.ID"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="售至代码">
              <el-input
                v-model="formData.jilubianhao"
                :style="{ width: '100%' }"
                disabled
              >
              </el-input>
            </el-form-item>
            <el-form-item label="客户简称" required>
              <el-input
                v-model="formData.kehujiancheng"
                placeholder="请输入客户简称"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>

            <el-form-item label="省市区" required>
              <el-cascader
                v-model="formData.newaddress"
                :options="listOptions.addressAllOption"
                :props="{
                  value: 'label',
                  children: 'children',
                }"
                :style="{ width: '100%' }"
                placeholder="请选择省市区"
                @change="mapChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="经度">
              <el-input
                v-model="formData.jingdu"
                disabled
                placeholder="请输入经度"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="统一社会信用代码" required>
              <el-input
                v-model="formData.tonyishehuiixngyondao"
                placeholder="请输入统一社会信用代码"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="所属公司" required>
              <el-select
                v-model="formData.CompanyCode"
                placeholder="请选择所属公司"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in listOptions.CompanyCodeOptions"
                  :key="index"
                  :label="item.Name"
                  :value="item.ID"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="共享公司"
              v-if="mode === 'editkehuxingxi_from'"
            >
              <el-select
                v-model="formData.gongxianggonsi"
                multiple
                filterable
                default-first-option
                placeholder="请选择共享公司"
                :style="{ width: '85%' }"
              >
                <el-option
                  v-for="(item, index) in listOptions.gongxinggongsiOptions"
                  :key="index"
                  :label="item.Name"
                  :value="item.ID"
                >
                </el-option>
              </el-select>
              <el-button
                size="mini"
                type="text"
                @click="select_gongsi"
                :style="{ width: '15%' }"
                >全选</el-button
              >
            </el-form-item>
            <el-form-item label="客户名称" required>
              <el-input
                v-model="formData.kehumingcheng"
                placeholder="请输入客户名称"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="检索码">
              <el-input
                v-model="formData.jiansuoma"
                placeholder="请输入检索码"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="客户详细地址" required>
              <el-input
                v-model="formData.kehudizhi"
                placeholder="请输入客户详细地址"
                :style="{ width: '100%' }"
                @blur="sarchAddress(formData.kehudizhi)"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="纬度">
              <el-input
                v-model="formData.weidu"
                disabled
                placeholder="请输入纬度"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="销售员名称">
              <el-input
                v-model="formData.xioadjfisd"
                placeholder="请输入销售员名称"
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <h3 class="h3_tab">税票信息</h3>
      <hr />

      <el-form
        :model="formData2"
        size="mini"
        label-width="110px"
        style="width: 100%; display: flex; justify-content: space-around"
      >
        <el-col :span="11">
          <el-form-item label="银行">
            <el-input
              v-model="formData2.b1"
              placeholder="请输入银行"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="税号">
            <el-input
              v-model="formData2.b2"
              placeholder="请输入税号"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="是否含税">
            <el-select
              v-model="formData2.b3"
              placeholder="请选择税率"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in listOptions.IsshuiOptions"
                :key="index"
                :label="item.Name"
                :value="item.ID"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="税率">
            <el-select
              v-model="formData2.b4"
              placeholder="请选择税率"
              :style="{ width: formData2.b4 === '其他' ? '40%' : '100%' }"
            >
              <el-option
                v-for="(item, index) in listOptions.ShuilvOptions"
                :key="index"
                :label="item.Name"
                :value="item.ID"
              ></el-option>
            </el-select>
            <template v-if="formData2.b4 === '其他'">
              <el-input
                v-model="formData2.b99"
                placeholder="请输入税率"
                :style="{ width: '50%' }"
              ></el-input>
              %
            </template>
          </el-form-item>
          <el-form-item label="开票地址">
            <el-input
              type="textarea"
              v-model="formData2.b6"
              placeholder="请输入开票地址"
              :style="{ width: '100%' }"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="银行账号">
            <el-input
              v-model="formData2.b7"
              placeholder="请输入银行账号"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="许可证">
            <el-input
              v-model="formData2.b8"
              placeholder="请输入许可证"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input
              v-model="formData2.b9"
              placeholder="请输入电话号码"
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              type="textarea"
              v-model="formData2.b10"
              placeholder="请输入备注"
              :style="{ width: '100%' }"
              maxlength="200"
              show-word-limit
            >
            </el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </div>

    <div id="baiduMap">
      <div v-if="loade" style="position: absolute; top: 50%; left: 45%">
        加载中<i class="el-icon-loading"></i>
      </div>
    </div>
  </div>
</template>

<script>
import BaiduMapMixin from "@/utils/baidu.map.js";
import ValidateMixin from "@/mixins/ValidateMixin.js";
import pca from "./pca-code.json";
/**
 * 表单校验
 */
let REQUIRED_PORP_LIST1 = [
  {
    label: "代码类型",
    prop: "leixingdaima",
  },
  {
    label: "所属公司",
    prop: "CompanyCode",
  },
  {
    label: "客户简称",
    prop: "kehujiancheng",
  },
  {
    label: "客户名称",
    prop: "kehumingcheng",
  },
];

export default {
  name: "tab1",
  mixins: [BaiduMapMixin, ValidateMixin],
  components: {},
  props: {
    mode: {
      type: String,
    },
  },
  computed: {
    // addressCityOption() {
    //   this.formData.shi = "";
    //   let option = this.addressAllOption.find(
    //     (i) => i.label === this.formData.sheng
    //   );
    //   if (Object.prototype.toString.call(option) === "[object Object]") {
    //     option = option.children;
    //   } else {
    //     option = [];
    //   }
    //   return option;
  },

  data() {
    return {
      loade: true,
      baiduMap: null,
      formData: {
        leixingdaima: "",
        CompanyCode: "",
        jilubianhao: "",
        kehujiancheng: "",
        kehudizhi: "",
        jiansuoma: "",
        jingdu: "113.276498",
        weidu: "23.124888",
        xioadjfisd: "",
        kehumingcheng: "",
        newaddress: "",
        tonyishehuiixngyondao: "",
        gongxianggonsi: [],
      },
      formData2: {
        b1: "",
        b2: "",
        b3: "",
        b4: "",
        b6: "",
        b7: "",
        b8: "",
        b9: "",
        b10: "",
        b99: "",
      },

      listOptions: {
        CompanyCodeOptions: [
          {
            ID: "123",
            Nmae: "地方",
          },
        ],
        addressAllOption: pca,
        ShuilvOptions: [
          {
            ID: "VAT 16",
            Nmae: "VAT 16",
          },
          {
            ID: "VAT 10",
            Nmae: "VAT 10",
          },
          {
            ID: "VAT 9",
            Nmae: "VAT 9",
          },
          {
            ID: "VAT 6",
            Nmae: "VAT 6",
          },
          {
            ID: "VAT 3",
            Nmae: "VAT 3",
          },
          {
            ID: "其他",
            Nmae: "其他",
          },
        ],
        IsshuiOptions: [
          {
            ID: "含税",
            Nmae: "含税",
          },
          {
            ID: "不含税",
            Nmae: "不含税",
          },
        ],
        gongxinggongsiOptions: [
          {
            ID: "广州公司",
            Nmae: "广州公司",
          },
          {
            ID: "北京公司",
            Nmae: "北京公司",
          },
          {
            ID: "香港公司",
            Nmae: "香港公司",
          },
        ],
      },
    };
  },

  methods: {
    //全选公司按钮
    select_gongsi() {
      this.formData.gongxianggonsi = ["广州公司", "北京公司", "香港公司"];
    },
    //区change
    mapChange() {
      let f = this.formData;
      f.kehudizhi = f.newaddress[0] + f.newaddress[1] + f.newaddress[2];
      this.sarchAddress(f.kehudizhi);
    },
    //校验必填
    verify_required() {
      return this.$validateForm(this.formData, REQUIRED_PORP_LIST1);
    },
    // 加载地图
    async getMap() {
      // 创建地图实例
      this.baiduMap = new BMap.Map("baiduMap");
      // 创建一个地理位置实例
      const myGeol = new BMap.Geolocation();
      // 获取当前位置信息
      return new Promise((resolve, reject) => {
        myGeol.getCurrentPosition((result) => {
          if (myGeol.getStatus() === BMAP_STATUS_SUCCESS) {
            resolve(result);
            return;
          }
          reject();
        });
      });
    },
    /**
     * 获取地图内部实例
     *
     * @param result 位置信息结果
     * @returns 无返回值
     */
    getMapInternal(result) {
      console.log("位置信息===>", result);
      // 如果获取位置信息成功-将经纬度信息存储到formData对象中
      // this.formData.jingdu = result.longitude || "116.404";
      // this.formData.weidu = result.latitude || "39.915";
      // 初始化百度地图实例
      this.__mapInstance__ = this.initBaiduMap({
        containerId: "baiduMap",
        lng: this.formData.jingdu,
        lat: this.formData.weidu,
      });
      // 禁止点击
      // // 根据mode的值绑定或取消点击事件
      // this.bindMapClick();
    },
    // 根据经纬度-更新地址/经纬度
    async sarcLnglat(point) {
      let myGeo = new BMap.Geocoder(); // 创建一个地理编码器对象
      let $$point = new BMap.Point(point.lng, point.lat); // 创建一个地理坐标点对象
      // 根据坐标得到地址描述
      try {
        let result = await new Promise((resolve, reject) => {
          // 创建一个Promise对象，用于异步操作
          myGeo.getLocation($$point, (result) => {
            // 调用地理编码器对象的getLocation方法，根据坐标获取地址信息
            resolve(result); // 将结果传递给Promise对象的resolve方法
          });
        });
        // 设置地址/经纬度
        console.log("获取定位的地址", result); // 打印获取到的地址信息
        this.formData.kehudizhi = result.address; // 将获取到的地址信息赋值给formData对象的dizhi属性
        this.formData.jingdu = result.point.lng; // 将获取到的经度赋值给formData对象的jingdu属性
        this.formData.weidu = result.point.lat; // 将获取到的纬度赋值给formData对象的weidu属性
      } catch (error) {
        console.log("地图编码发生错误", error); // 打印地理编码发生的错误信息
        return this.$notify.error({
          title: "消息",
          message: "地图编码发生错误,请重新加载！",
        });
      }
    },
    // 根据地址-获取经纬度
    async sarchAddress(diqu1) {
      // 省/市-地址
      console.log([diqu1]); // 打印省/市和地址信息
      let myGeo = new BMap.Geocoder(); // 创建地理编码器实例
      //将地址解析结果显示在地图上, 并调整地图视野
      try {
        let point = await new Promise((resolve, reject) => {
          myGeo.getPoint(
            diqu1, // 地址
            (point) => {
              resolve(point); // 解析成功时，返回解析结果
            }
          );
        });
        if (!point) {
          this.formData.jingdu = "";
          this.formData.weidu = "";
          // 如果解析结果为空，直接返回
          return this.$notify.error({
            title: "消息",
            message: "无法解析该省/市坐标",
          });
        }
        let $$point = new BMap.Point(point.lng, point.lat); // 创建百度地图的坐标点实例 // 根据坐标得到地址描述

        this.clearOverlays();
        let map = this.getBaiduMap(); // 获取百度地图实例
        map.centerAndZoom($$point, 20); // 将地图中心设置为解析得到的坐标点，并设置缩放级别为20
        this.addPoint(point); // 在地图上添加标记点
        this.formData.jingdu = point.lng; // 将获取到的经度赋值给formData对象的jingdu属性
        this.formData.weidu = point.lat; // 将获取到的纬度赋值给formData对象的weidu属性
      } catch (error) {
        console.log("地图编码发生错误", error); // 打印地理编码错误信息
        return this.$notify.error({
          title: "消息",
          message: "地图编码发生错误,请重新加载！",
        });
      }
    },

    // 绑定点击事件
    bindMapClick() {
      this.bindMapClickEvent((e) => {
        console.log("//////点击地图打印地址经纬度信息", e);
        // 调用sarcLnglat函数，将点击的地图坐标转换为地址信息
        this.sarcLnglat(e.point);
        // 在地图上添加标点覆盖物
        this.addPoint(e.point);
      });
    },
  },
  created() {
    Promise.all([
      // 加载地图
      this.getMap(),
    ])
      .then((result) => {
        let [data1] = result;
        this.getMapInternal(data1);
        this.loade = false;
      })
      .catch((err) => {});

    if (this.mode === "addkehuxingxi_from") {
      console.log("新增");
    }
    if (this.mode === "editkehuxingxi_from") {
      console.log("编辑");
    }
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  justify-content: space-between;
  padding-right: 25px;
  &_left {
    width: 55%;
  }
}

#baiduMap {
  width: 600px;
  height: 600px;
  border: 1px solid rgb(12, 12, 12);
  max-height: 600px;
  flex: 0 0 40%;
  box-sizing: border-box;
  margin-left: 20px;
  position: relative;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 -4px 8px rgba(0, 0, 0, 0.1),
    4px 0 8px rgba(0, 0, 0, 0.1), -4px 0 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.h3_tab {
  margin-bottom: 0 !important;
}
.ekeik {
  &.el-checkbox {
    margin: 0 5px;
  }
}
</style>
